<template>
	<view>
		<u-navbar :border-bottom='false' title-bold="true" style="font-weight: 1200;" background-color="#ffffff" title="账单">
		</u-navbar>
	<view class="container head-box">
		<tui-tab :tabs="tabs" isSticky :top="top" :current="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19" @change="change"></tui-tab>
		
		<view class="tui-records__list">
			<view>
				<tui-list-cell :hover="false" v-for="(v,i) in payListData" :key="i">
					<view class="tui-records__item">
						<image class="tui-icon" v-if="!v.isPayer" src='/static/images/mall/wallet/icon_income_3x.png'></image>
						<image class="tui-icon" v-if="v.isPayer" src='/static/images/mall/wallet/icon_expend_3x.png'></image>
						<view>
							<view class="tui-title">{{exchangeType.get(v.type)}}</view>
							<view class="tui-desc">{{v.createTime}}</view>
						</view>
						<view class="tui-right__box">
							<view class="tui-amount" :class="{'tui-expend':v.isPayer}">{{v.isPayer?'-':'+'}}{{v.amount}}</view>
							<view class="tui-desc">{{v.status==1||v.status==3?'交易完成':v.status==2?'进行中':'失败,且退款'+v.refund+'元'}}</view>
						</view>
					</view>
				</tui-list-cell>
				<!--加载loading-->
				<tui-loadmore v-if="loading" :index="3" type="red"></tui-loadmore>
				<tui-nomore v-if="pageMax==query.current"></tui-nomore>
				<!--加载loading-->
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import {_exchangeType} from '@/pages/data/payDict.js'
	export default {
		data() {
			return {
				top:100,
				tabs: ["全部", "收入", "支出"],
				currentTab: 0,
				
				loading: false,
				payListData: [],
				query:{
					current:1,
					size:10
				},
				pageMax:1,
				
				exchangeType:new Map([]),
				
			}
		},
		onLoad() {
			this.exchangeType=_exchangeType;
			const query = uni.createSelectorQuery().in(this);
			let that=this;
			query.select(".head-box").boundingClientRect(data => {
				uni.getSystemInfo({ 
					success: function (res) {
						that.top=( 44+res.statusBarHeight+4)
					}
			    });
			}).exec();
		},
		onShow() {
			this.loadPayList()
		},

		methods: {
			loadPayList(){
				this.loading=true
				this.$u.api.payList(Object.assign({},this.query,this.currentTab==0?null:{'l.isPayer_equal':this.isPayer})).then(res=>{
					this.payListData=res.records
					this.pageMax=res.pages
					this.loading=false
				})
			},
			change(e) {
				this.currentTab = e.index
				this.query.current=1
		
				if(e.index==1)this.isPayer=0
				else if(e.index=2)this.isPayer=1
				this.loadPayList()
			},
			
		},
		onPullDownRefresh() {

		},
		onReachBottom() {
			if(this.query.current<this.pageMax){
				this.loading=true
				this.query.current+=1
				this.$u.api.payList(Object.assign({},this.query,this.currentTab==0?null:{'l.isPayer_equal':this.isPayer})).then(res=>{
					this.payListData=this.payListData.concat(res.records)
					this.loading=false
				})
			}
			
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-records__list {
		margin-top: 20rpx;
	}

	.tui-records__item {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-icon {
		width: 72rpx;
		height: 72rpx;
		margin-right: 20rpx;
	}

	.tui-title {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
	}

	.tui-desc {
		font-size: 24rpx;
		font-weight: 400;
		color: #888888;
		padding-top: 12rpx;
	}

	.tui-right__box {
		margin-left: auto;
		text-align: right;
	}

	.tui-amount {
		font-size: 30rpx;
		font-weight: 400;
		color: #EB0909;
	}

	.tui-expend {
		color: #19be6b !important;
	}
</style>
